<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        width: 500px;
        height: 400px;
        border: 1px solid black;
    }
    #top{
        position: relative;
        margin:20px;
        font-size: 1.2em;
        font-weight: 1000;
    }
    #middle{
        position:relative;
        margin: 20px;
    }
    button{
        position: relative;
        top:50px;
        left:-110px;
    }
    #ip{
        height: 20px;
        width: 200px;
        color:#999;
        border:2px solid #000;
        border-radius: 5px;
    }
    .bottom{
        display: none;
    }
     .bottom1{
        position: relative;
        width: 300px;
        height: 200px;
        left: 20px;
        top: 50px;
        background-color: rgb(185, 238, 172);
        display: block;
    }
</style> 
<body>
    <div id='box'>
        <div id='top'>
            <span>
                请输入自定义名字：
                <input id='ip' type="text" value="李雷">
            </span>
        </div>
        <div id="middle">
            <span>
                <input name="rd" type="radio" value="公制" checked>公制
                <input name="rd" type="radio" value="美制"  >美制
            </span>
            <button id="bt">随机生成笑话</button>
        </div>
        <div class="bottom">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;今天气温 35 摄氏度，大老爹出门散步。
           当走到肯德基门前时，突然就变成一只鼻涕虫爬
           走了。人们都惊呆了，全程目睹但并没有慌，
           因为大老爹是一个 140 公斤的胖子，天气又辣么
           热。
       </div>
    </div>
    <script>
        var place = ['白宫','迪士尼乐园','肯德基'];
        var people = ['怪兽威利','圣诞老人','大老爹'];
        var tx = ["自燃了", "在人行道化成了一坨泥", "变成一条鼻涕虫爬走了"];
        var ip = document.getElementById('ip');
        var div = document.querySelectorAll('div');
        var dc1='今天气温 35 摄氏度，';
        var dc2='出门散步。当走到'
        var dc3='门前时，突然就变成一只鼻涕虫爬走了。人们都惊呆了，';
        var dc4='全程目睹但并没有慌，因为';
        var dc5='是一个 140 公斤的胖子，天气又辣么热。'
        ip.onfocus = function(){
            if(ip.value==='李雷'){
                this.value='';
            }else{
                this.value=ip.value
                
            }
            ip.style.color='#000'
        }
        ip.onblur = function(){
            if(ip.value===''){
                ip.value='李雷';
                ip.style.color='#999'
            }
            
        }
        
        bt.onclick = function(){
            var randomNum1 = Math.floor(Math.random()*3)
            var randomNum2  = Math.floor(Math.random()*3)
            div[3].className='bottom1';
            div[3].innerHTML=dc1 + people[randomNum1] + dc2 
            + place[randomNum2] + dc3 + ip.value + dc4 + 
            people[randomNum1] + dc5;
        }
       
        
    </script>
</body>
</html>